<template>
  <div class="content_box">
    <div class="msg">
      <div class="name_box">
        <img src="/static/images/avter.jpg" alt="">
        <div class="user_box">
          <p class="name">183****2832</p>
          <p class="text">您还不是会员</p>
        </div>
      </div>
      <p class="line"></p>
      <p class="text1">开通会员可享受折扣</p>
    </div>
    <div class="list_box">
      <p class="title">VIP套餐</p>
      <div class="nr">
        <div @click="tabClick(index)" :class="tabIndex == index?'box on':'box'" v-for="(item,index) in list" :key="index">
          <p class="name">{{index+1}}年会员</p>
          <p class="price">￥<span>{{item.value}}</span></p>
          <p class="old">￥60</p>
        </div>
      </div>
    </div>
    <div class="tips">
      <van-checkbox 
      checked-color="#DBB673" 
      icon-size="16px" 
      :value="checked " 
      @change="changeCheckbox">已阅读并同意</van-checkbox>
      <p><span @click="goLink">《应许之地会员协议》</span></p>
    </div>
    <!-- <p class="anniu" @click="submit"></p> -->
    <div class="anniu">
      <van-button 
      @click="submit"
      :disabled="loading"
      :loading="loading" 
      loading-text="续费中..."
      type="primary"
      color="#3d98f7"
      custom-style="box-shadow: 0rpx 10rpx 20rpx #CEDBFA;border:none;width: 100%;height: 88rpx;line-height: 88rpx;background-image: linear-gradient(to right, #F8DCAA , #DBB673);border-radius: 100rpx;text-align: center;color: #fff;font-size: 30rpx;"
    >{{anniuTitle}}</van-button>
    </div>
    <p class="line_l"></p>
    <div class="tq_box">
      <p class="title">VIP会员特权</p>
      <div class="nr">
        <div class="box">
          <img src="/static/images/my_flg.png" alt="">
          <p class="text">权限</p>
        </div>
        <div class="box">
          <img src="/static/images/my_flg.png" alt="">
          <p class="text">权限</p>
        </div>
        <div class="box">
          <img src="/static/images/my_flg.png" alt="">
          <p class="text">权限</p>
        </div>
        <div class="box">
          <img src="/static/images/my_flg.png" alt="">
          <p class="text">权限</p>
        </div>
        <div class="box">
          <img src="/static/images/my_flg.png" alt="">
          <p class="text">权限</p>
        </div>
        <div class="box">
          <img src="/static/images/my_flg.png" alt="">
          <p class="text">权限</p>
        </div>
        <div class="box">
          <img src="/static/images/my_flg.png" alt="">
          <p class="text">权限</p>
        </div>
      </div>
    </div>
  </div>
</template>
 
<script>
import {
  getStoreRenewAmount,
  renew
} from "@/api/index";
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState(['user']),
  },
  components: {},
  data() {
    return {
      checked:false,
      storeId:'',
      feeType:0,
      price:0,
      list:[
        {
          label:1,
          value:0
        },
        {
          label:2,
          value:0
        },
        {
          label:3,
          value:0
        }
      ],
      tabIndex:0,
      anniuTitle:'',
      loading:false
    };
  },
  onShow() {},

  methods: {

    // 提交支付
    submit(){
      const that = this;
      if(!this.checked){
        this.$toast('请先勾选协议')
        return
      }
      this.$showLoading("续费中...")
      this.loading = true
      renew({feeType:this.feeType,storeId:this.user.storeId}).then(res=>{
        if(res.statusCode == '00000'){
          wx.requestPayment({
            timeStamp:res.data.timeStamp,
            nonceStr:res.data.nonce_str,
            package:`prepay_id=${res.data.prepay_id}`,
            signType:"MD5",
            paySign:res.data.sign,
            success:function(succ){
              console.log(succ)
              if(succ.errMsg === "requestPayment:ok"){
                wx.switchTab({
                  url: `/pages/home/main`,
                });          
              }
            },
            fail:function(err){
              that.loading = false
              wx.hideLoading()
            }
          })
        }
      })
    },

    // 价格栏目切换
    tabClick(index){
      this.tabIndex = index
      let price = this.list[index].value
      this.feeType = this.list[index].label
      this.anniuTitle = `确认协议立即以${price}续费`
    },

    // 获取续费单价
    getPrice(){
      getStoreRenewAmount().then(res=>{
        if(res.statusCode == '00000'){
          this.price = res.data
          this.list.map(item=>{
            item.value = item.label*this.price
          })
          let price = this.list[0].value
          this.feeType = this.list[0].label
          this.anniuTitle = `确认协议立即以${price}续费`
          console.log(this.list)
        }
      })
    },

    // 选中协议
    changeCheckbox(e){
      const that=this
      if(this.checked){
        this.checked=!this.checked
        return
      } 
      this.checked=true 
    },
  },
  onLoad(options) {
    // this.storeId = options.storeId
    console.log(options)
    this.getPrice()
  },
  onHide() {},

  onUnload() {
    this.checked = false
  },
};
</script>

<style lang="scss" scoped>
.content_box{
  .msg{
    margin:30rpx;
    padding:30rpx;
    background-image: linear-gradient(to right, #F8DCAA , #DBB673);
    border-radius: 15rpx;
    .name_box{
      display: flex;
      align-items: center;
      padding-bottom:40rpx;
      img{
        width: 110rpx;
        height: 110rpx;
        border-radius: 50%;
        margin-right:20rpx;
      }
      .name{
        font-size:34rpx;
        color:#a07b30;
        font-weight: 500;
      }
      .text{
        font-size:26rpx;
        color:#A38850;
        margin-top:10rpx;
      }
    }
    .line{
      width: 60%;
      height: 1px;
      background: #c99c52;
    }
    .text1{
      margin-top:30rpx;
      font-size:26rpx;
      color:#A38850;
    }
  }
  .list_box{
    margin:0 30rpx;
    margin-top:60rpx;
    .title{
      font-weight: 500;
      font-size:36rpx;
      margin-bottom:30rpx;
    }
    .nr{
      display: flex;
      justify-content: space-between;
    }
    .box{
      width: 30%;
      padding:30rpx 0;
      background: #fff;
      border:1px solid #f5f5f5;
      border-radius: 15rpx;
      text-align: center;
      .name{
        font-size:32rpx;
        font-weight: 500;
      }
      .price{
        font-size:28rpx;
        color:#9B7459;
        margin:15rpx 0;
        span{
          font-weight: bold;
          font-size:60rpx;
        }
      }
      .old{
        color:#999;
        font-size:28rpx;
        text-decoration:line-through;
      }
      &.on{
        background: #FFF4E1;
        border-color:#F2E7D6;
      }
    }
  }
  .tips{
    display: flex;
    font-size:26rpx;
    justify-content: center;
    margin:30rpx 0;
    span{
      color:#DBB673;
    }
  }
  .anniu{
    margin:0 50rpx;
  }
  .line_l{
    width: 100%;
    height: 20rpx;
    background: #f5f5f5;
    margin:30rpx 0 60rpx 0;
  }
  .tq_box{
    margin:0 30rpx;
    .title{
      font-weight: 500;
      font-size:36rpx;
      margin-bottom:40rpx;
    }
    .nr{
      font-size:28rpx;
      .box{
        display: inline-block;
        margin-right:110rpx;
        text-align: center;
        margin-bottom:30rpx;
        &:nth-child(4n){
          margin-right:0;
        }
        img{
          width: 90rpx;
          height: 90rpx;
          margin-bottom:10rpx;
        }
      }
    }
  }
}
</style>
